<template>
    <div ref="echartsRef"></div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, ref, shallowRef, watch} from 'vue'
import * as echarts from 'echarts'
import {EChartsOption} from 'echarts'
import {useEchartsTheme} from '@/utils'

const {defaults} = useEchartsTheme();
echarts.registerTheme('theme', defaults)

const props = defineProps({
    option: {
        type: Object,
        required: true
    }
})

const echartsRef = ref()
let instance = shallowRef();


const onDraw = () => {
    //参考：https://blog.csdn.net/Ljwen_/article/details/129262389
    instance.value = echarts.init(echartsRef.value, 'theme');
    instance.value.setOption(props.option)
}

// 更新数据
watch(() => props.option, (v: EChartsOption) => {
    instance.value.setOption(v)
}, {deep: true})

onMounted(() => {
    nextTick(() => onDraw())
})

window.addEventListener('resize', () => {
    instance.value?.resize()
})
</script>
